<template>
  <div>
    <!-- 我的订单 -->
    <el-tabs type="border-card">
      <el-tab-pane label="所有订单">
        <el-button>合并付款</el-button>
        <el-button>合并代付</el-button>
        <!-- 复制开始位置 -->
        <el-table border :data="data">
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- prop的值需与数据库中的字段名一致 -->
          <el-table-column prop="id" label="宝贝">
            <div slot-scope="scope">
                <img src="" width="80px" height="75px">
                <div style="display:inline-block;width:300px;">
                  <span>{{scope.row.title}}</span><br>
                  <span style="color:gray;">{{scope.row.type}}</span>
                </div>
            </div>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="120"></el-table-column>
          <el-table-column prop="count" label="数量" width="120"></el-table-column>
          <el-table-column prop="method" label="商品操作" width="90">
            <a>投诉卖家</a>
            <a href="#">退运保费</a>
          </el-table-column>
          <el-table-column prop="pay" label="实付款" width="180"></el-table-column>
     
          <el-table-column prop="state" label="交易状态" width="180">
            <!-- 0:交易取消  1.已付款  2:待付款   3：支付中。。。。。-->
            <template slot-scope="scope">
              <span v-if="scope.row.state==0">交易取消</span>
              <span v-if="scope.row.state==1">已付款</span>
              <span v-if="scope.row.state==2">待付款</span>
              <span v-if="scope.row.state==3">支付中</span>
            </template> 
          </el-table-column>
          <el-table-column label="交易操作" align="center" width="110">
            <el-button type="danger">立即付款</el-button>
            <el-button>找朋友帮忙付</el-button>
            <el-button>取消订单</el-button>
          </el-table-column>  
        </el-table>
        <!-- 复制结束位置 -->
      </el-tab-pane>
      <el-tab-pane label="待付款">待付款<!--后续可把el-table 的内容复制到此区域--></el-tab-pane>
      <el-tab-pane label="待发货">待发货</el-tab-pane>
      <el-tab-pane label="待收货">待收货</el-tab-pane>
      <el-tab-pane label="待评价">待评价</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {id:'1001', price: 234,count:0,pay: 0,state: 0, title:'大码法式赫本风黑色衬衫连衣裙女春秋新款设计感收腰显瘦',type:'颜色分类：黑色 尺码：2xl码（建议体重140-160）'},
          {id:'1002', price: 110, count:4,pay: 440,state: 0, title:'大码法式赫本风黑色衬衫连衣裙女春秋新款设计感收腰显瘦',type:'颜色分类：黑色 尺码：2xl码（建议体重140-160）'},
          {id:'1003', price: 99, count:10,pay: 990,state: 2, title:'大码法式赫本风黑色衬衫连衣裙女春秋新款设计感收腰显瘦',type:'颜色分类：黑色 尺码：2xl码（建议体重140-160）'},
          {id:'1004', price: 299, count:90,pay:29000,state: 1, title:'大码法式赫本风黑色衬衫连衣裙女春秋新款设计感收腰显瘦',type:'颜色分类：黑色 尺码：2xl码（建议体重140-160）'},
          {id:'1004', price: 69, count:120,pay: 680, state: 3, title:'大码法式赫本风黑色衬衫连衣裙女春秋新款设计感收腰显瘦',type:'颜色分类：黑色 尺码：2xl码（建议体重140-160）'},

          ]
      }
    },
  }
</script>